<template>
	<view class="container">
		<!-- 会员弹窗说明 -->
		<view class="cu-modal" @tap="hideModal" :class="modalName=='Modal'?'show':''" style="z-index: 99999;">
			<view class="cu-dialog" style="padding: 300rpx 0 70rpx;">
				<view class="modal_bg">
					<view class="title-header">
						<view class="title-text">
							    服· 务 · 说 · 明
						</view>
					</view>
				</view>
				<view class="modal_main">
					<view class="padding-lr margin-top-xs">
						<view class="text-grey text-smdf">
							<text class="cuIcon-title text-blue margin-right-xs"></text>
							<text>  感谢大家  对「大学生联盟」的支持！</text>
						</view>
		
						<view class="text-grey text-smdf margin-top-sm">
							<text class="cuIcon-title text-blue margin-right-xs"></text>
							<text>为了能给与您更优质的服务,请添加我们的微信帮您进行一对一的服务！</text>
						</view>
						<view class="text-grey text-smdf margin-top-sm flexstyle">
							 <u--image :showLoading="true" :src="src" width="180px" height="180px"  ></u--image>
						</view>
		 
		
		
					</view>
				</view>
			</view>
		</view>
		
		
	 
		<view class="bg-top bg-blue">
			<view class="top-box shadow">

				<view class="qh-title text-bold text-blue text-xl">
					<text>学生详情</text>
				</view>

				<!-- :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']" -->
				<view class="cu-list menu">
					<view class="cu-item" style="padding: 0;">
						<view class="content margin-top" style="display: flex; justify-content: space-around;">
							<!-- <text class="cuIcon-locationfill text-red margin-right-xs"></text> -->
							<text class="text-black text-bold"
								style="min-width: 290rpx; max-width: 290rpx; text-align: left;">{{data.studentName}}</text>
							<!-- <text class="cuIcon-forwardfill text-blue margin-lr-sm"></text> -->
							<text class="text-black text-bold"
								style="min-width: 290rpx; max-width: 290rpx; text-align: left;"></text>
						</view>
					</view>

					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-friendaddfill text-green"></text>
							<text class="text-black">学员性别</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-green light">{{data.studentGender}}</view>
						</view>
					</view>

					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-upstagefill text-yellow  margin-right-xs"></text>
							<text class="text-black">学员年级</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-yellow light">{{data.studentGrade}}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-medalfill text-mauve  margin-right-xs"></text>
							<text class="text-black">授课方式</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-mauve light">{{data.studentTeachingMethod}}</view>
						</view>
					</view>
					 
					 
					 
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-servicefill text-olive  margin-right-xs"></text>
							<text class="text-black">授课区域</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-olive light">{{data.studentArea}}</view>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-global text-pink  margin-right-xs"></text>
							<text class="text-black">居住地址</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-pink light">{{data.studentAddress}}</view>
						</view>
					</view>

					 




					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-redpacket_fill text-red  margin-right-xs"></text>
							<text class="text-black">家教费用</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-red light">{{data.price}}</view>
						</view>
					</view>
					<view class="bxBox">
						<text class="bxImg cuIcon-countdownfill text-purple"></text>
						<view class="title text-black">家教时间</view>
					</view>

					<view class='padding-bottom-sm flex flex-wrap bg-white' style="justify-content: flex-end;">
						<view class="action">
							<view class="cu-tag round bg-purple light"> {{data.studentTime}}</view>
						</view>

					</view>
					 

					 

					<view class="bxBox">
						<text class="bxImg cuIcon-form text-pink"></text>
						<view class="title text-black">家教科目</view>
					</view>

					<view class='padding-bottom-sm flex flex-wrap bg-white' style="justify-content: flex-end;">
						<view class="cu-tag margin-right-xs bg-pink light radius">
							{{data.studentParentingSubjects}}
						</view>
						 
					</view>




				</view>

			</view>


			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">学员概况</text>
							<text class="text-ABC text-blue">AboutMyself</text>
						</view>
					</view>
					<view class='padding-bottom-sm padding-left-sm bg-white Describe'>
						{{data.studentDescribe}}
					</view>
				</view>
			</view>
			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">教员要求</text>
							<text class="text-ABC text-blue">Education</text>
						</view>
					</view>
					<view class='padding-bottom-sm padding-left-sm bg-white Describe'>
						{{data.teacherRequirements}}
					</view>
				</view>
			</view>
		 

			<!-- 加入按钮 -->
			<view class="padding-lr flex margin-top-sm" style="justify-content: space-between;">
				<button class="cu-btn bg-blue margin-top-sm lg" style="width: 46%;" @click="showModal">我要接单</button>
				<button class="cu-btn bg-red margin-top-sm lg" style="width: 46%;" open-type="contact">联系客服</button>
			</view>

			<view  class="top30">
				<view class='label acea-row row-between-wrapper '>
					<view class="text-blue" style="margin-left: 30rpx;">订单编号:{{data.id ||"暂无"}}</view>
					 
					<view class="text-blue "style="margin-right: 30rpx;">
						创建时间:{{data.remark1 || "暂无"}}
					</view>
				</view>
			</view>
          <view  class="hight30">
				 
			</view>
		</view>
	</view>
</template>

<script>
	// import request from '@/common/request.js';
	 
	export default {
		data() {
			return {
				joinList: [{

					},
					 
				],
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				modalName: null, //会员弹窗
				data: {},
				// id: 23,
				animation_timer: null, // 动画定时器
				width: 375,
				height: 1920
			}
		},
		onShow() {

		},
		onLoad(e) {
			if (e) {

				this.id = e.id;
				// this.id = 23
				this.getNoticelist();


			}
			 
		},
		onReachBottom() {

		},
		onShareAppMessage() {
			return {
				title: '分享'
			}
		},
		methods: {
			 showModal() {
			 	this.modalName = 'Modal'
			 },
			 hideModal() {
			 	this.modalName = null;
			 },
			getNoticelist() {
				let that = this
				this.http.get("wechat/student/" + this.id, this.editFormFields, "正在递交数据....").then(data => {

					if (data.code == 200) {
						// this.$toast(data.msg)
						this.data = data.data;

					} else {
						this.$toast(data.msg)
					}
				})

			}
		}
	}
</script>
<style lang="less" scoped>
	.container {
		width: 750rpx;
		color: #333333;

		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
	.top30 {
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
	.hight30{
		height: 30rpx;
		width: 100%;
	}
	.Describe {
	
		font-size: 32rpx;
		// font-weight: 700;
		margin-top: 20rpx;
		width: 100%;
		overflow-wrap: break-word;
		line-height: 52rpx;
		// margin: 16rpx 16rpx 26rpx 0;
	
	}
	// 弹窗
	.cu-dialog {
		background: #FFFFFF;
		overflow: visible;
	}
	
	.modal_bg {
		width: 100%;
		height: 400rpx;
		position: absolute;
		top: -100rpx;
		background-image: url(https://zhoukaiwen.com/img/qdpz/modal_bg.png);
		background-size: 100%;
		background-repeat: no-repeat;
	}
	
	.modal_main {
		text-align: left;
		background-color: #FFFFFF;
	}
	
	.title-header {
		position: absolute;
		bottom: 0;
		width: 100%;
		display: flex;
		height: 120rpx;
		font-size: 40rpx;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		background-image: url(https://cdn.zhoukaiwen.com/wccswF.png);
		background-size: cover;
	}
	
	.title-text {
		background-image: -webkit-linear-gradient(0deg, #ff8a34, #FBBD12);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.flexstyle{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	 
</style>
